<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<title>find_user</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
	var retCheckId = false;
	$(function(){
		$('#SubmitBtn').click(function(){
			$.ajax({
				type: "post",
				url: "/OffTheRecord/isexist.action",
				data: "userId="+$('#user_id').val(),
				dataType:"json",
				
				success:function(data){
					if(data.flag == true){
						alert("사용가능합니다!");
						retCheckId = true;
						return;
					}
					else{
						alert("사용할 수 없는 아이디 입니다!");
						return;
					}
				}
			});//ajax
		});//click
	});
	function register(){
		var frm = document.register_form;
		if(frm.userId.value=="") {
			alert("아이디를 입력해 주세요!");
			return frm.userId.focus();
		}else if(frm.userEmail.value==""){
			alert("이메일을 입력해 주세요!");
			return frm.userEmail.focus();
		}else if(frm.password.value==""){
			alert("비밀번호를 입력해 주세요!");
			return frm.password.focus();
		}else if(frm.password2.value==""){
			alert("비밀번호 확인을 입력해 주세요!");
			return frm.password2.focus();
		}
		
		if(retCheckId == true){
			frm.submit();
		}else{
			alert("아이디 중복체크를 해주세요!");
			return frm.userId.focus();
		}
	}
	
	//비밀번호 일치하는지 알아보는 jQuery
	$(document).ready(function(){
		$('#password_check').keyup(function(){
			var f = document.register_form;
			if(f.password.value != f.password2.value){
				$('#password_check_span').html("<font color=red> 비밀번호가 다릅니다!</font>");
			}else{
				$('#password_check_span').html("<font color=green> 비밀번호가 같습니다!</font>");
			}
		});
	});

</script>


</head>
<body>
<c:import url="../common/top.jsp"></c:import>
<div class="container" style="margin: 60px;"></div>

<div class="container">
<div class="row">


<!--  -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="border: 1px solid lightgray; border-radius: 5px;">

	<h2 align="center">회원 가입</h2>

	<form action="/OffTheRecord/register.action" class="form-horizontal" name="register_form" role="form" method="post">

		<div class="form-group">
			<label class="control-label col-sm-3 col-md-3 col-lg-3" for="user_id">아이디:</label>
			
			<div class="col-sm-6 col-md-6 col-lg-6">
				<input type="text" class="form-control" name="userId" id="user_id" placeholder="아이디를 입력해주세요.">
			</div>
			
			<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
				<button type="button" class="btn btn-danger" id="SubmitBtn">아이디 중복확인</button>
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-3 col-md-3 col-lg-3" for="user_email">이메일:</label>
			
			<div class="col-sm-6 col-md-6 col-lg-6">
				<input type="email" class="form-control" name="userEmail" id="user_email" placeholder="이메일을 입력해주세요.">
			</div>
			
			<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
			</div>
		</div>
		
		<div class="form-group">
			<label class="control-label col-sm-3 col-md-3 col-lg-3" for="password">비밀번호:</label>
			
			<div class="col-sm-6 col-md-6 col-lg-6">
				<input type="password" class="form-control" id="password" name="userPassword" placeholder="비밀번호를 입력해주세요.">
			</div>
			
			<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-3 col-md-3 col-lg-3" for="password_check">비밀번호 확인:</label>
			
			<div class="col-sm-6 col-md-6 col-lg-6">
				<input type="password" class="form-control" id="password_check" placeholder="비밀번호를 다시 입력해주세요." name="password2"> 
				<span id="password_check_span"></span>
			</div>
			
			<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
			</div>
		</div>
		
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="button" class="btn btn-default" id="SubmitBtn" onclick="register()">회원가입</button>
			</div>
		</div>
	</form>

</div>
<!--  -->


</div>
</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
</body>
</html>